<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>海洋世界</title>
    <link rel="stylesheet" href="css/seaWorld.css">
</head>
<body>
<header>
    <a href="child.html">返回</a>
</header>
<div class="nav">
    <span class="nav-title1">
        <a href="#">哺乳动物</a>
    </span>
    <span class="nav-title2">
        <a href="#">爬行动物</a>
    </span>
    <span class="nav-title3">
        <a href="#">软体动物</a>
    </span>
    <span class="nav-title4">
        <a href="#">棘皮动物</a>
    </span>
    <span class="nav-title5">
        <a href="#">腔肠动物</a>
    </span>
    <span class="nav-title6">
        <a href="#">节肢动物</a>
    </span>
    <span class="nav-title7">
        <a href="#">海洋植物</a>
    </span>
</div>
<hr>
<div class="animal">
    <div class="animal-m">
        <h1>哺乳动物代表</h1>
        <img src="img/animal-1.png" alt="">
        <a href="#">蓝鲸</a>
    </div>
    <div class="animal-m">
        <h1>爬行动物代表</h1>
        <img src="img/animal-2.png" alt="">
        <a href="#">海龟</a>
    </div>
    <div class="animal-m">
        <h1>软体动物代表</h1>
        <img src="img/animal-3.png" alt="">
        <a href="#">海兔</a>
    </div>
    <div class="animal-m">
        <p>棘皮动物代表</p>
        <img src="img/animal-4.png" alt="">
        <a href="#">海星</a>
    </div>
    <div class="animal-m">
        <h1>肛肠动物代表</h1>
        <img src="img/animal-5.png" alt="">
        <a href="#">水母</a>
    </div>
    <div class="animal-m">
        <h1>节肢动物代表</h1>
        <img src="img/animal-6.png" alt="">
        <a href="#">海虾</a>
    </div>
    <div class="animal-m">
        <h1>海洋植物代表</h1>
        <img src="img/animal-7.png" alt="">
        <a href="#">海藻</a>
    </div>
</div>
</body>
</html>